<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <script src="js/jquery-3.2.1.js"></script>
</head>
<style>
*{
    margin: 0px;
    padding: 0px;
}
a{
    text-decoration: none;
}
ul,li{
    list-style-type: none;
}
h1{
    text-align: center;
}
.box{
    width: 100%;
    height: 100%;
}
.kt{
    width: 280px;
    height: 100px;
    position: relative;
    top: -680px;
    margin-left: 560px;
}
.content{
    width: 1000px;
    height: 600px;
    margin: 0px auto;
    position: relative;
    margin-top: -700px;
}
.content a{
    color: red;
    font-weight: bold;
}
.core{
    width: 450px;
    height: 550px;
    border: 1px solid black;
    float: left;
    margin-left: 300px;
    margin-top: 23px;
}
.core span{
    width: 80px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    display: inline-block;
}
.core li{
    width: 285px;
    height: 35px;
    display: inline-block;
}
.core p{
    width: 200px;
    height: auto;
    text-align: center;
    margin: auto;
    font-size: 20px;
}
.core span,.core li{
    margin: 20px 0px 0px 10px;
}
.core input,.core select{
    width: 280px;
    height: 35px;
}
.core input[name=sex]{
    width: 15px;
    height: 15px;
    line-height: 15px;
    margin-right: 15px;
}
.core button{
    width: 100px;
    height: 50px;
    margin-right: 30px;
}
#anJian{
    width:100px;
    height:40px;
    margin-left:50px;
}
#chongZhi{
    width:100px;
    height:40px;
}
.foot{
    width: 100%;
    height: 120px;
    background: silver;
    float: left;
}
.js1{
    width: 200px;
    height: 50px;
    float: left;
    margin-top: 20px;
    margin-left: 40px;
}
.js2{
    width: 750px;
    height: 50px;
    float: left;
    margin-top: 20px;
    margin-left: 10px;
}
.js3{
    width: 750px;
    height: 60px;
    float: left;
    margin-left: 250px;
}
</style>
<body>
    <div class="box" id="box">
         <img src="imgs/天龙八部/zx.jpg" width="1366" height="768">
         <div class="kt">
            <h1>天龙八部手游</h1> 
         </div>
        <div class="content">
            <form class="core" action="3.html" method="GET">
                <p>注册信息填写</p>
                <span>账号</span><li><input type="text" id="Code" maxlength="20" minlength="8" placeholder="8-20位且以字母开头" name="userName"></li>
                <span>密码</span><li><input type="password" name="PWD" id="Pwd1" maxlength="20" minlength="8" placeholder="8-20字母和数字组成，不能是纯数字或纯英文"></li>
                <span>确认密码</span><li><input type="password" id="Pwd2" placeholder="请再次确认密码"></li>
                <span>绑定邮箱</span><li><input type="email" name="Dh" id="Email" placeholder="请输入正确的邮箱格式"></li>
                <span>手机号码</span><li><input type="tel" id="Tell" name="qQh" placeholder="请输入正确的手机号码"></li>
                <span>性别</span><li>
                    <input type="radio" value="男" name="sex">男
                    <input type="radio" value="女" name="sex">女
                <li>
                    <input type="submit" id="anJian" value="注册" onclick="checkLength()">
                    </li>
                <input type="reset" id="chongZhi" value="重置">
            </form>
        </div>
        <div class="foot">
            <div class="js1">
                <img src="imgs/天龙八部/kt3.png" width="200" height="50">
            </div>
            <div class="js2">
                <a href="#">关于腾讯游戏|</a>
                <a href="#">服务条款|</a>
                <a href="#">广告服务|</a>
                <a href="#">游戏客服|</a>
                <a href="#">腾讯游戏招聘|</a>
                <a href="#">游戏地图|</a>
                <a href="#">游戏活动|</a>
                <a href="#">腾讯网|</a>
                <a href="#">网站导航</a>
            </div>
            <div class="js3">
                <p>
                    本网络游戏适合年满18周岁以上的用户使用；请您确定已如实进行实名注册；为了您的健康，请合理控制游戏时间。出版号：ISBN 978-7-7979-5919-1 | 文网游备字〔2017〕M-RPG 0626 号
                </p>
            </div>
        </div>
    </div>
</body>
<script>
    
function checkLength(){
    var pwd1=document.getElementById("Pwd1"); //获取密码框值
    var pwd2=document.getElementById("Pwd2");
    var name=document.getElementById("Code");//获取用户名框值
    var eml=document.getElementById("Email");//获取邮箱框的值
    var tel=document.getElementById("Tell");//获取手机号码框的值
    
    if(pwd1.value.length==0 && name.value.length==0 ){
        alert("请填写注册信息！");
        return false;
    }
    else if(name.value.length<8){
        alert("用户名请输入8-20位字母或数字！");
        return false;
    } 
    else if(pwd1.value.length==0){
        alert("请输入密码！");
        return false;
    }
    else if(pwd1.value.length<8){
        alert("请输入密码8-20位！");
        return false;
    }
    else if(pwd1.value != pwd2.value){
        alert("密码前后不一致！");
        return false;
    }
    else if(eml.value.length==0){
        alert("请填写邮箱！");
        return false;
    }
    else if(tel.value.length==0){
        alert("请填写电话号码！");
        return false;
    }
    else{
        return true;
    }  
}

</script>
</html>